import React from 'react';
import Base from '@/components/Base';
import {
  Button,
  Card,
  Form,
  Radio,
  Input,
  Badge,
  Select,
  Table,
  Modal,
  message,
  Popover,
} from 'antd';
import { View, Text, KayButton } from '@/components';
import styles from './index.less';

interface State {
  show: boolean;
}
interface Props {
  loading: boolean;
  onHide?: () => void;
}

export default class IndexLoading extends Base<Props, State> {
  public state: State = {
    show: true,
  };

  public async didShow() {}

  public async didMount() {
    // const svgPt:any = document.querySelector('#ldSvg');
    // const length = svgPt? svgPt.getTotalLength(): 0;
    // console.log('svg::', svgPt, length)
  }

  public componentWillReceiveProps(nextProps: any) {
    const { loading } = this.props;
    if (nextProps.hasOwnProperty('loading') && loading != nextProps.loading) {
      this.changeState(nextProps.loading);
    }
  }

  public render() {
    const { show } = this.state;
    const { loading } = this.props;
    return (
      <React.Fragment>
        <View
          className={this.cx(styles.loadingBox, {
            [styles.hide]: !show,
          })}
          gsap-loading-id="loadingBox"
        >
          <View className={styles.boatBox}>
            <svg
              viewBox="0 0 40 15"
              width="40"
              height="15"
              className={styles.boat}
            >
              <path
                d="M3.3,3.2c2.8,6.3,9.4,10,16.1,10.1c4.5,0.2,9.3,0.7,13.6-0.7c1.6-1.2,3.2-2.8,3.9-4.7c0,0,0.1,0,0.1,0
                c-0.1,0.9-0.6,1.6-1.1,2.3c-0.8,1-1.6,2-2.6,2.8c-4.4,1.7-9.3,1.1-13.9,0.8C12.7,13.6,5.7,9.6,3.3,3.2L3.3,3.2z"
              />
              <path
                d="M19.1,4.5C14.6,4.2,7.9,4,3.4,3.5c0,0,0.1-0.2,0.1-0.2c2.7,2.3,6.3,3.5,9.7,4.2c3.5,0.8,7.1,0.9,10.7,1.1
                c4,0.1,8.2,0.5,12-0.6c2-0.8,0.5-1.7-0.8-2c-1.7-0.4-3.5-0.6-5.3-0.8c1.7-0.1,3.7,0.2,5.4,0.5c1.8,0.3,3.1,1.7,0.9,2.7
                C32.3,9.6,28.1,9.1,24,9.1C16.9,8.6,9,8.1,3.4,3.4c0,0-0.3-0.3-0.3-0.3s0.5,0.1,0.5,0.1C5.7,3.5,9,3.7,11.3,3.9
                C11.3,4,19.2,4.4,19.1,4.5L19.1,4.5z"
              />
              <path
                d="M12.9,12.3c-2.6,0.3-5-1.2-6.8-2.9c-2-1.9-3-4.4-3.9-7C2.6,2.5,4.1,2.9,4.5,3c0,0,0.1,0,0.1,0c0,0,0.1,0.5,0.1,0.5L4.4,3.1
                c0,0,0.1,0,0.1,0l-1.7,0L3,2.8C4.4,7.7,7.9,11.2,12.9,12.3L12.9,12.3z"
              />
              <path
                d="M19.1,8.5l-0.2-5.7l0-0.1l0.1,0c3.5,0.1,7,0,10.5,0.1c0,2-0.1,3.9-0.2,5.9c-0.2-1.8-0.2-3.8-0.2-5.7c0,0,0.2,0.2,0.2,0.2
                C25.9,3.1,22.4,2.9,19,2.8c0,0,0.1-0.1,0.1-0.1C19.1,2.7,19.2,8.6,19.1,8.5L19.1,8.5z"
              />
              <path
                d="M29.3,3c0.2-0.4,0.5-0.9,0.7-1.3l0.1,0.1c-3.2,0.1-7,0.1-9.9-0.2C19.8,2,19.4,2.4,19,2.7c0.4-0.4,0.8-0.9,1.1-1.3
                c0,0,0.1,0,0.1,0c3.4-0.1,6.8,0,10.1,0.2C30,2.1,29.6,2.5,29.3,3L29.3,3z"
              />
              <path
                d="M20,7.5c0-1.3,0-2.6,0-3.8c0,0,0.2,0,0.2,0l3.3,0.2c0.2,0,0.1,0,0.1,0.1c0,0-0.1,3.5-0.1,3.5l0,0.1C23.4,7.6,20,7.5,20,7.5
                L20,7.5z M20.4,7.5l3.1-0.1c0,0-0.1,0.1-0.1,0.1S23.3,4,23.3,4l0.1,0.1l-3.3-0.1l0.2-0.2C20.4,5.1,20.4,6.3,20.4,7.5L20.4,7.5z"
              />
              <path
                d="M24.6,8.7l-0.1-4.8c0,0,0-0.2,0-0.2c0.3,0,3.4-0.1,3.6-0.1c0,1.7,0.1,3.7-0.3,5.3c-0.2-1.7-0.3-3.3-0.2-5
                c0,0,0.3,0.3,0.3,0.3s-3.2-0.1-3.2-0.1s0.2-0.2,0.2-0.2C24.9,3.9,24.7,8.9,24.6,8.7L24.6,8.7z"
              />
              <path d="M29.1,8.8c0,0,0.9-2.2,0.9-2c0,0,0.1-5.1,0.1-5.1c0,0,0.1,5.1,0.1,5.1c0,0,0,0,0,0L29.5,9L29.1,8.8L29.1,8.8z" />
            </svg>
          </View>
          <View className={styles.waveBox}>
            <svg
              width="40"
              height="15"
              viewBox="5 0 100 30"
              className={styles.waveImg}
            >
              <path
                id="ldSvg"
                className={styles.wave}
                fill="none"
                strokeWidth={2}
                strokeLinecap="round"
                d="M 0 16.5 c 7.5 0 7.5 -6 15 -6 s 7.5 6 15 6 s 7.5 -6 15 -6 s 7.5 6 15 6 s 7.5 -6 15 -6 s 7.5 6 15 6 s 7.5 -6 15 -6 s 7.5 6 15 6 s 7.5 -6 15 -6 s 7.5 6 15 6 s 7.5 -6 15 -6 s 7.5 6 15 6 s 7.5 -6 15 -6 s 7.5 6 15 6 s 7.5 -6 15 -9"
              />
            </svg>
          </View>
        </View>
      </React.Fragment>
    );
  }

  private changeState = (loading: boolean) => {
    const { onHide } = this.props;
    this.interface.gsap.to("[gsap-loading-id='loadingBox']", {
      duration: 0.5,
      opacity: loading ? 1 : 0,
      onComplete: () => {
        this.setState(
          {
            show: loading,
          },
          () => {
            if (onHide) {
              onHide();
            }
          },
        );
      },
    });
  };
}
